<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
    <style>
        .sw {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 
         	条件渲染：
         	1.v-if
         		写法：
         			(1).v-if="表达式" 
         			(2).v-else-if="表达式"
         			(3).v-else="表达式"
         			适用于：切换频率较低的场景。
         			特点：不展示的DOM元素直接被移除。
         			注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
         
         	2.v-show
         			写法：v-show="表达式"
         			适用于：切换频率较高的场景。
         			特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
         					
        			3.备注：使用v-if的时，元素可能无法获取到(因为在dom树中移除了)，而使用v-show一定可以获取到。
-->
    <div id="root">
        <!-- 使用v-show做条件渲染 js表达式为真显示元素，为假隐藏元素，底层使用display：none实现-->
        <!-- f12中结构还在 -->
        <h1 v-show="a">欢迎来到{{name}}</h1>
        <h1 v-show="1===1">欢迎来到{{name}}</h1>
        <hr>

        <!-- 使用v-if做条件渲染 js表达式为真显示元素，为假隐藏元素,但是为假的话f12中结构都不存在 -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>
        <hr>

        <h1>n的值为:{{n}}</h1>
        <button @click="n++">n值加一</button>
        <hr>

        <div v-if="n === 1">Angular</div><!-- 与js中的if-else if-else逻辑一样,依次判断若某个条件，成立执行相应代码，则后续就不会在执行判断，跳到结构末尾 -->
        <div v-else-if="n === 2">React</div><!-- 此判断结构不能被打断，要连贯(中间插入没有此结构的其他元素<div>@</div>) 后面的判断都会失效-->
        <div v-else-if="n === 3">Vue</div>
        <div v-else>哈哈</div>
        <hr>
        <!-- template模板,不影响结构，页面渲染时此标签不会出现在页面结构中 
        但要显示或隐藏其中的元素只能配合v-if使用，不能用v-show-->
        <template v-if="n>=1">
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </template>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '成都信息工程大学',
            a: false,
            n: 0
        }
    });
</script>

</html>